<template>
  <el-tabs type="border-card" style="height: 248px">
    <el-tab-pane label="24小时能耗实时监控（单位：小时）">
      <div ref="dayOnlineChart" style="height: 240px;"></div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>

export default {
  props: [
    'selectedEnergyId',
    'selectedEnergy',
    'selectedShowType'
  ],
  watch : {
    selectedEnergyId(n, o) {
      if (n !== o) {
        this.fetchData(this.initChart)
      }
    },
    selectedShowType(n, o) {
      if (n !== o) {
        this.initChart()
      }
    }
  },
  data() {
    return {
      chart: null,
      unit: 'kg',
      list: [],
      option: {
        grid: {
          left: '2%',
          right: '2%',
          bottom: '22%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (c) {
            return '时间：' + c[0].name + '<br>能耗：' + c[0].value + ' ' + c[0].seriesName;
          }
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'kgce',
            type: 'line',
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.fetchData(this.initChart)
  },
  unmounted() {
  },
  methods: {
    fetchData: function (func) {
      const energyId = this.selectedEnergy.energy.id
      const fromDate = this.$getTimeInfo(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
      const data = {
        content: {
          fromDate: fromDate.year + '-' + fromDate.month + '-' + fromDate.day + ' ' + fromDate.hour + ':00:00',
          toDateType: 'hour',
          energyId: !energyId || energyId < 0 ? null: energyId
        }
      }
      this.$axios({url:'/ems/client/index/energy/time/trend', data: data}).then((content) => {
        this.list = content.list
        func()
      })
    },
    initChart: function () {
      const list = this.list
      this.option.xAxis.data = [];
      this.option.series[0].data = [];
      for (let i = 0; i < list.length; i ++) {
        const item = list[i]
        this.option.xAxis.data.push(item.time);
        if (this.selectedEnergy.showType === 'real') {
          this.option.series[0].name = this.selectedEnergy.energy.unite;
          this.option.series[0].data.push(this.$doubleVal(item.increaseRealValue));
        }else if (this.selectedEnergy.showType === 'stand') {
          this.option.series[0].name = this.selectedEnergy.standUnite;
          this.option.series[0].data.push(this.$doubleVal(item.increaseStandValue));
        }else if (this.selectedEnergy.showType === 'cash') {
          this.option.series[0].name = this.selectedEnergy.cashUnite;
          this.option.series[0].data.push(this.$doubleVal(item.increaseCashValue));
        }
      }
      this.$nextTick(() => {
        this.chart = this.$echarts.init(this.$refs.dayOnlineChart)
        this.chart.setOption(this.option)
      })
    }
  },
};
</script>
<style>
</style>
